<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>需求详情页面</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <style>
        /* 头部标题 */
        .header {
            height: 100px;
            background: #F5F5F5;
            padding: 30px;
        }

        .breadcrumb {
            position: relative;
            padding: 20px 0;
            height: 18px;
            line-height: 18px;
            color: #999;
            font-family: \5b8b\4f53;
            z-index: 1;
        }

        #detail {

            padding: 20px;

        }

        #detail1 {
            width: 55%;
            padding: 20px;
            border: 1px solid rgb(185, 184, 184);
            margin: 20px;
        }

        #detail11 {
            padding: 20px;

            margin: 20px;
        }

        #detail12 {
            padding: 20px;

            margin: 20px;
        }

        #detail13 {
            padding: 20px;

            margin: 20px;
        }

        #detail14 {
            padding: 20px;

            margin: 20px;
        }

        #detail2 {
            height: 350px;
            width: 35%;
            /* border: 1px solid rgb(185, 184, 184); */
            margin: 20px;
        }

        #detail3 {
            padding-top: 30px;
            height: 150px;
            width: 35%;

            margin: 20px;
        }

        #detail4 {

            text-align: center;

            height: 50px;
            width: 35%;

            margin: 25px;
        }

        #detail5 {

            /* height: 500px; */
            width: 35%;
            border: 1px solid rgb(185, 184, 184);
            margin: 25px;
        }

        #detail21 {
            border: 1px solidrgb(185, 184, 184);
            margin: 20px;
        }

        .detalinfo-req-title {
            padding-bottom: 30px;
        }

        .detalinfo-curPrice {
            padding-bottom: 20px;
        }



        .fl {

            display: inline;
        }

        a {
            text-decoration: none;
            outline: none;
            color: #555;
        }

        button,
        a {
            width: 80px;
            height: 40px;
            cursor: pointer;
        }

        .detail-req-prcess {
            border: 1px solid #e2e2e2;
            padding: 25px 25px 20px 25px;
        }

        .detail-process-a {
            padding-bottom: 20px;
            font-size: 22px;
            color: #333;
            line-height: 22px;
        }

        .detail-process-b {
            padding-bottom: 20px;
        }

        .detail-process-c {
            color: #002A00;
            font-size: 13px;
            line-height: 24px;
        }

        .detail-process-d {
            font-size: 13px;
            color: #ff6600;
            line-height: 24px;
        }



        .tc {
            text-align: center !important;
        }

        .base-mb15 {
            margin-bottom: 15px;
        }

        .xyeBtn {
            transition: translateZ .2s linear 0s;
            display: inline-block;
            text-align: center;
            border-radius: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            -ms-border-radius: 8px;
            -o-border-radius: 8px;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            width: 120px;
            overflow: hidden;
            height: 40px;
            border-style: inset;
            line-height: 40px;
            border: 0;
            cursor: pointer;
            position: relative;
            z-index: 100;
        }

        #forth {
            /* border: 1px solid red; */
            height: 200px;
            margin-top: 50px;
            background-color: black;
        }

        #forth-left {
            width: 300px;
            /* border: 1px solid blue; */
            margin-left: 150px;
            padding: 50px;
            float: left;
        }

        #forth-left-p {
            font-size: 30px;
            color: blue;

        }

        #forth-middle {
            width: 600px;
            /* border: 1px solid black; */

            float: left;
        }

        #forth-middle li {
            list-style: none;

        }

        #forth-middle ul {
            padding: 0;
        }

        #forth-middle a {
            text-decoration: none;
            color: white;
            display: block;
        }

        #forth-middle>ul {
            padding: 35px;
            float: left;
        }

        #forth-right {

            width: 400px;
            /* border: 1px solid red; */
            float: left;
        }

        #user {
            background-color: rgb(195, 195, 195);
            width: 470px;
        }


        #user img {
            width: 150px;
            height: 150px;
        }

        .thumbnail img {
            width: 150px;
            height: 150px;
        }
    </style>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/service/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/service/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../../css/service/animate.css" rel="stylesheet">
    <link href="../../css/service/style.css?v=4.1.0" rel="stylesheet">

</head>

<body>
    <div class="header">
        <!-- 导航栏 -->
        <div class="logo">
            <a href="../../index.html"><img src="../imgs/logo.png" /></a>发布需求
        </div>
    </div>
    <!--响应式导航 - begin-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="breadcrumb w clearFix">
                    <span class="fl">您的位置：</span>
                    <span class="fl"><a href="serviceselect.html">全部需求</a>&nbsp;&gt;&nbsp;</span>
                </div>
            </div>
        </div>
    </div>
    <!--响应式导航end-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 col-xs-4">

                <div id="detail">

                    <div class="col-md-8 col-xs-3" id="detail1">

                        <div class="col-md-8 col-xs-3" id="detail11">
                            <div class="detalinfo-req-title clearFix">
                                <span class="detalinfo-bg detalinfo-bg-piece02 fl"></span>
                                <h1 class="detalinfo-title fl" title="上海地区找一个会制作PPT课件的人">
                                    上海地区找个会制作PPT课件的人</h1>
                            </div>
                            <dl class="clear detalinfo-curPrice clearFix">
                                <dt class="fl">预算费用：</dt>
                                <dd class="fl color-orange font-20">
                                    <i>¥</i><strong class="require-price">100.00-500.00</strong>
                                </dd>
                            </dl>
                            <dl class="clear detalinfo-curPrice clearFix">
                                <dt class="fl">需要人数：</dt>
                                <dd class="fl color-000 font-12">
                                    <em class="color-blue">1</em>人
                                </dd>
                            </dl>
                            <dl class="clear detalinfo-curPrice clearFix">
                                <dt class="fl">需求地点：</dt>
                                <dd class="fl">上海市&nbsp;&nbsp;上海市&nbsp;&nbsp;普陀区</dd>
                            </dl>
                            <dl class="clear detalinfo-curPrice clearFix">
                                <dt class="fl">发布时间：</dt>
                                <dd class="fl color-black font-12">
                                    <em>
                                        2019-09-12</em>
                                </dd>
                            </dl>
                            <dl class="clear detalinfo-curPrice clearFix">
                                <dt class="fl">报名截止：</dt>
                                <dd class="fl detalinfo-time color-blue font-18">
                                    <span class="orange" id="LiveClock1">27天4小时39分23秒</span>
                                </dd>
                            </dl>
                            <div class="clear detalinfo-btnBox clearFix">

                                <a class="xyeBtn btnWhite-8">
                                    <button type="button" class="btn btn-w-m btn-default">报名</button></a>
                            </div>

                        </div>

                        <div class="col-md-8 col-xs-3" id="detail12">
                            <h4>需求描述:</h4>
                            <p> 委托人是众荟律师团队的一位资深律师，由于要经常给各大银行，
                                保险等金融机构讲解法律，税务等知识。但时间和精力有限，现在想寻找一位助手，
                                要求就是需要会制作PPT课件，有一定的法律知识。最好是在校法学专业的大学生，
                                想做兼职的可以联系我。</p>
                            <hr>
                            <div>未知</div>
                        </div>

                        <div class="col-md-8 col-xs-3" id="detail13">
                            <div class="detail-req-prcess">
                                <h3 class="detail-process-a"><i class="iconfont"></i>&nbsp;交易流程</h3>
                                <div class="detail-process-b clearFix">
                                    <p class="circle-blue fl"><b>1.</b>&nbsp;发布招标需求</p>
                                    <span class="line-blue fl"></span>
                                    <p class="circle-blue fl"><b>2.</b>&nbsp;服务商报名</p>
                                    <span class="line-blue fl"></span>
                                    <p class="circle-blue fl"><b>3.</b>&nbsp;需求方选人并托管费用</p>
                                    <span class="line-blue fl"></span>
                                    <p class="circle-blue fl"><b>4.</b>&nbsp;服务商按时工作</p>
                                    <span class="line-blue fl"></span>
                                    <p class="circle-blue fl"><b>5.</b>&nbsp;需求方验收付款</p>
                                </div>
                                <p class="detail-process-c">
                                    交易过程中资金全程托管在担保账户中，只有需求方验收合格后，平台才会打款给服务商；
                                    若交易过程中需求方对服务商不满意，需求方可以拒绝验收付款；如申请终止，需双方达成一致，平台会将托管资金将全额退还；
                                </p>
                                <p class="detail-process-d">
                                    <i>注：需求方需在招标截止时间后10天内选中服务商，若未选人，需求关闭。</i><br>
                                    <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务商务必在完成时间后3天内提交验收，否则默认为服务商未完成需求，订单将自动关闭。</i><br>
                                    <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务商提交验收后，需求方7天内不作处理，订单默认验收合格，平台将自动打款给服务商。</i>
                                </p>
                            </div>
                        </div>

                        <div class="col-md-8 col-xs-3" id="detail14">
                            你可能关注的服务
                            <hr>

                            <div class="col-md-6">
                                <div class="thumbnail">
                                    <a href="servicedetail.html"><img src="../../imgs/touxiang.jpg" alt=""></a>
                                    <span style="font-size: 20px;">￥5.00</span><span>/个</span>
                                    <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
                                    <div style="overflow: hidden">
                                        <p style="float: left">name </p>
                                        <p style="float:right">city</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="thumbnail">
                                    <a href="servicedetail.html"><img src="../../imgs/touxiang.jpg" alt=""></a>
                                    <span style="font-size: 20px;">￥5.00</span><span>/个</span>
                                    <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
                                    <div style="overflow: hidden">
                                        <p style="float: left">name </p>
                                        <p style="float:right">city</p>
                                    </div>
                                </div>
                            </div>

                        </div>


                    </div>

                    <div class="col-md-8" id="detail2">
                        <div>
                            <div id="user">
                                <div class="widget-head-color-box navy-bg p-lg text-center">
                                    <div class="m-b-md">
                                        <h2 class="font-bold no-margins">
                                            user
                                        </h2>
                                        <small>上官婉儿</small>
                                    </div>
                                    <img src="../../imgs/touxiang.jpg" class="img-circle circle-border m-b-md"
                                        alt="profile">
                                    <div>
                                        <span>100 动态</span> |
                                        <span>350 关注</span> |
                                        <span>610 关注者</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-8" id="detail4">
                        <div>
                            <button type="button" class="btn btn-w-m btn-default">QQ联系</button>
                            <p></p>

                            <button type="button" class="btn btn-w-m btn-default">电话联系</button>


                        </div>


                    </div>

                    <div class="col-md-8" id="detail3">
                        <div>
                            <div id="user1">
                                <div class="publish-similar base-mb15 tc">
                                    <h5>我也有这样类似的需求</h5>
                                    <h6>稍作修改 快速发布</h6>
                                    <div class="pr" sthyle="z-index:1">
                                        <a href="../service/serviceadd.html">
                                            <button type="button" class="btn btn-w-m btn-default">发布类似</button></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8" id="detail5">
                        <div>
                            你可能感兴趣的需求
                            <div class="thumbnail">
                                <a href="servicedetail.html"><img src="../../imgs/touxiang.jpg" alt=""></a>
                                <span style="font-size: 20px;">￥5.00</span><span>/个</span>
                                <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
                                <div style="overflow: hidden">
                                    <p style="float: left">name </p>
                                    <p style="float:right">city</p>
                                </div>
                            </div>
                            <div class="thumbnail">
                                <a href="servicedetail.html"><img src="../../imgs/touxiang.jpg" alt=""></a>
                                <span style="font-size: 20px;">￥5.00</span><span>/个</span>
                                <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
                                <div style="overflow: hidden">
                                    <p style="float: left">name </p>
                                    <p style="float:right">city</p>
                                </div>
                            </div>
                            <hr>
                            <hr>
                            <hr>
                            <hr>
                            <hr>
                            <hr>
                        </div>

                    </div>


                </div>

            </div>
        </div>
    </div>


    <div id="forth">
        <!-- 左边 -->
        <div id="forth-left">
            <h5 style="color: #ccc">闲时网客服热线</h5>
            <p id="forth-left-p">400-180-8321</p>
            <p style="color: white">每天09: 00~21: 00</p>
        </div>
        <!-- 中间 -->
        <div id="forth-middle">
            <ul>
                <li style="color: #ccc">闲时网
                    <ul>
                        <li style="margin-top: 20px"><a href="#">关于我们</a></li>
                        <li style="margin-top: 12px"><a href="#">联系我们</a></li>
                        <li style="margin-top: 12px"><a href="#">加入我们</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li style="color: #ccc">帮助中心
                    <ul>
                        <li style="margin-top: 20px"><a href="#">交易规则</a></li>
                        <li style="margin-top: 12px"><a href="#">法律声明</a></li>
                        <li style="margin-top: 12px"><a href="#">常见问题</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li style="color: #ccc">我是需求方
                    <ul>
                        <li style="margin-top: 20px"><a href="#">发布需求</a></li>
                        <li style="margin-top: 12px"><a href="#">要选服务对象</a></li>
                        <li style="margin-top: 12px"><a href="#">需求方入门</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li style="color: #ccc">我是服务方
                    <ul>
                        <li style="margin-top: 20px"><a href="#">服务方入驻</a></li>
                        <li style="margin-top: 12px"><a href="#">浏览全部需求</a></li>
                        <li style="margin-top: 12px"><a href="#">服务方入门</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <!-- 右边  -->
        <div id="forth-right">
            <p style="margin-top: 30px;color: #ccc">联系关注我们呗</p>
            <p style="margin-top: 20px"><a href="#"><img src="../../imgs/QQ图片20190913162259.png" alt="图片加载失败!"></a>
                <a href="#"><img src="../../imgs/QQ图片20190913162435.png" alt="图片加载失败!"></a>
                <a href="#"><img src="../../imgs/QQ图片20190913162519.png" alt="图片加载失败!"></a>
                <a href="#"><img src="../../imgs/QQ图片20190913162606.png" alt="图片加载失败!"></a>
            </p>
        </div>
    </div>







    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>

</body>

</html>